<template>
  <div class="container">
    <!-- 从学科跳转过来时展示的数据 -->
    <div class="isJump" v-if="isJump">
      <!-- 卡片面板 -->
      <el-card class="box-card">
        <el-breadcrumb
          slot="header"
          separator-class="el-icon-arrow-right"
          class="breadcrumb-nav"
        >
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ subjectName }}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 头部搜索栏 -->
        <div id="nav-bar">
          <!-- form表单 -->
          <el-form
            :inline="true"
            :model="formInline"
            class="el-form"
            ref="listFromRef"
          >
            <el-form-item label="标签名称">
              <el-input v-model="formInline.tagName"></el-input>
            </el-form-item>
            <!-- 清除搜索按钮 -->
            <el-form-item label="状态" class="tlabel">
              <el-select v-model="formInline.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="medium" @click="clear">清除</el-button>
              <el-button type="primary" size="medium" @click="getTagsList"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
          <!-- 右侧按钮组 -->
          <div class="btns">
            <el-link
              class="isLink"
              type="primary"
              icon="el-icon-back"
              :underline="false"
              @click="$router.back()"
              >返回学科</el-link
            >
            <el-button
              type="success"
              icon="el-icon-edit"
              @click="addTags = true"
              >新增标签</el-button
            >
          </div>
        </div>

        <!-- 提示信息的文案 -->
        <el-alert
          :title="`数据一共${total}条`"
          show-icon
          :closable="false"
          type="info"
        ></el-alert>
        <!-- 表格区域 -->
        <el-table stripe style="width: 100%" :data="tagsList">
          <el-table-column
            label="序号"
            type="index"
            width="80px"
          ></el-table-column>
          <el-table-column
            label="所属学科"
            prop="subjectName"
            width="212px"
          ></el-table-column>
          <el-table-column
            label="标签名称"
            prop="tagName"
            width="209px"
          ></el-table-column>
          <el-table-column label="创建者" prop="username" width="209px">
          </el-table-column>
          <el-table-column label="创建日期" prop="addDate" width="209px">
            <template slot-scope="scope">
              {{ parseTime(scope.row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="state" width="209px">
            <template slot-scope="scope">
              <span v-if="scope.row.state === 0">已禁用</span>
              <span v-else>已启用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-row>
                <el-col class="Operationbutton">
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="handleChangeDisabled(scope.row)"
                    >{{ scope.row.state === 0 ? "启用" : "禁用" }}</el-link
                  >
                  <el-link
                    :type="scope.row.state === 1 ? 'info' : 'primary'"
                    :disabled="scope.row.state === 0 ? false : true"
                    :underline="false"
                    @click="editDialogShow(scope.row)"
                    >修改</el-link
                  >
                  <el-link
                    :type="scope.row.state === 1 ? 'info' : 'primary'"
                    :disabled="scope.row.state === 0 ? false : true"
                    :underline="false"
                    @click="deleteTags(scope.row.id)"
                    >删除</el-link
                  >
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 添加标签的对话框 -->
      <el-dialog
        title="添加标签"
        :visible.sync="addTags"
        width="30%"
        :before-close="handleClose"
      >
        <add-tags
          ref="addform"
          :status="false"
          :subjectId="formInline.subjectID"
          @close="handleClose($event)"
          @success="getTagsList"
        ></add-tags>
      </el-dialog>

      <!-- 修改标签的对话框 -->
      <el-dialog
        title="修改目录"
        :visible.sync="editDialogVisible"
        width="30%"
        :before-close="handleCloseEditDialogVisible"
        v-if="editDialogVisible"
      >
        <edit-tags
          :scope="scope"
          ref="editFrom"
          :status="false"
          @close="handleCloseEditDialogVisible"
          @success="getTagsList"
        ></edit-tags>
      </el-dialog>
    </div>

    <!-- 默认打开时展示的页面 -->
    <div class="noJump" v-else>
      <el-card>
        <!-- 头部搜索栏 -->
        <div id="nav-bar">
          <!-- form表单 -->
          <el-form
            :inline="true"
            :model="formInline"
            class="el-form"
            ref="listFromRef"
          >
            <el-form-item label="标签名称">
              <el-input v-model="formInline.tagName"></el-input>
            </el-form-item>
            <!-- 清除搜索按钮 -->
            <el-form-item label="状态">
              <el-select v-model="formInline.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="medium" @click="clear">清除</el-button>
              <el-button type="primary" size="medium" @click="getTagsList"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
          <!-- 右侧按钮组 -->
          <div class="btns">
            <el-button
              type="success"
              icon="el-icon-edit"
              @click="addTags = true"
              >新增标签</el-button
            >
          </div>
        </div>

        <!-- 提示信息的文案 -->
        <el-alert
          :title="`数据一共${this.total}条`"
          show-icon
          :closable="false"
          type="info"
        ></el-alert>
        <!-- 表格区域 -->
        <el-table stripe style="width: 100%" :data="tagsList">
          <el-table-column
            label="序号"
            type="index"
            width="80px"
          ></el-table-column>
          <el-table-column label="所属学科" prop="subjectName" width="212px">
          </el-table-column>
          <el-table-column
            label="标签名称"
            prop="tagName"
            width="209px"
          ></el-table-column>
          <el-table-column label="创建者" prop="username" width="209px">
          </el-table-column>
          <el-table-column label="创建日期" prop="addDate" width="209px">
            <template slot-scope="scope">
              {{ parseTime(scope.row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="state" width="209px">
            <template slot-scope="scope">
              <span v-if="scope.row.state === 0">已禁用</span>
              <span v-else>已启用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150px" class="caozuo">
            <template slot-scope="scope">
              <el-row>
                <el-col class="Operationbutton">
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="handleChangeDisabled(scope.row)"
                    >{{ scope.row.state === 0 ? "启用" : "禁用" }}</el-link
                  >
                  <el-link
                    :type="scope.row.state === 1 ? 'info' : 'primary'"
                    :disabled="scope.row.state === 0 ? false : true"
                    :underline="false"
                    @click="editDialogShow(scope.row)"
                    >修改</el-link
                  >
                  <el-link
                    :type="scope.row.state === 1 ? 'info' : 'primary'"
                    :disabled="scope.row.state === 0 ? false : true"
                    :underline="false"
                    @click="deleteTags(scope.row.id)"
                    >删除</el-link
                  >
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="formInline.page"
            :page-sizes="[3, 5, 8, 10]"
            :page-size="formInline.pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </el-card>

      <!-- 添加标签的对话框 -->
      <el-dialog
        title="添加标签"
        :visible.sync="addTags"
        width="30%"
        :before-close="handleClose"
      >
        <add-tags
          ref="addform"
          @close="handleClose($event)"
          @success="getTagsList"
        ></add-tags>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="addTags = false">取 消</el-button>
          <el-button type="primary" @click="addTags = false"
            >确 定</el-button
          >
        </span> -->
      </el-dialog>

      <!-- 修改标签的对话框 -->
      <el-dialog
        title="修改目录"
        :visible.sync="editDialogVisible"
        width="30%"
        :before-close="handleCloseEditDialogVisible"
        v-if="editDialogVisible"
      >
        <edit-tags
          :scope="scope"
          ref="editFrom"
          @close="handleCloseEditDialogVisible"
          @success="getTagsList"
        ></edit-tags>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { list, changeState, remove } from "@/api/hmmm/tags";
import { parseTime } from "@/utils";
import AddTags from "../components/tags-add";
import EditTags from "../components/tags-edit";

export default {
  data() {
    return {
      // 查询参数
      formInline: {
        tagName: "",
        state: null,
        page: 1,
        pagesize: 10,
        subjectID: null,
      },
      // 是否由学科跳转过来
      isJump: false,
      // 新增目录的对话框是否展示
      addDirectoryDialog: false,
      // 所有标签的列表
      tagsList: [],
      // 总条数
      total: 0,
      // 添加标签的对话框是否展示
      addTags: false,
      // 修改标签的对话框
      editDialogVisible: false,
      // 点击当前修改的整条数据
      scope: {},
      subjectName: "",
      // 默认地址
      fullPath: "",
    };
  },
  components: {
    AddTags,
    EditTags,
  },
  created() {
    if (this.$route.query.id) {
      this.formInline.subjectID = this.$route.query.id;
      this.subjectName = this.$route.query.name;
      this.isJump = true;
    }
    // 获取所有标签列表
    this.getTagsList();
    // if (this.$route.fullPath === '') {

    // }
    this.fullPath = this.$route.fullPath;
    console.log(this.$route.fullPath);
  },
  watch: {
    fullPath() {
      if (this.fullPath === '/subjects/tags') {
        this.getTagsList()
      }
    }
  },
  methods: {
    async getTagsList() {
      try {
        // 发起请求获取列表数据
        const { data } = await list(this.formInline);
        // 把获取到的数据赋值给数据列表
        this.tagsList = data.items;
        // 总条数
        this.total = data.counts;
        // 获取来的所属学科名
        // this.subjectName = data.items[0].subjectName
        console.log(this.subjectName);
      } catch (err) {
        console.log(err);
      }
    },
    // 格式化事件的函数
    parseTime,
    // pagesize发生改变时调用的函数
    handleSizeChange(newSize) {
      // console.log(`每页 ${val} 条`);
      this.formInline.pagesize = newSize;
      // console.log(val);
      // console.log(this.queryInfo.pagesize);
      this.getTagsList();
      // pagesize发生改变时调用的函数
    },
    // page发生改变时调用的函数
    handleCurrentChange(newPage) {
      // console.log(`当前页: ${val}`);
      this.formInline.page = newPage;
      // console.log(this.queryInfo.page);
      this.getTagsList();
    },
    // 点击禁用启用按钮
    async handleChangeDisabled(scope) {
      const data = {};
      if (scope.state === 0) {
        data.state = 1;
        // this.formInline.state = state
      } else {
        data.state = 0;
        // this.formInline.state = state
      }
      data.id = scope.id;
      // 提交修改
      const res = await changeState(data);
      // 重新获取数据
      this.getTagsList();
    },
    // 点击清除搜索框
    clear() {
      this.formInline.tagName = "";
      this.formInline.state = null;
      this.getTagsList();
    },
    // 添加标签的对话框关闭前触发的回调函数
    handleClose(addTagsFrom) {
      addTagsFrom.subjectID = "";
      addTagsFrom.tagName = "";
      this.$refs.addform.$refs.addTagsFromRef.resetFields();
      // this.$refs.addform.$refs.addTagsFromRef.$options.propsData.model.subjectID ="";
      this.addTags = false;
    },
    // 修改标签的对话框展示
    editDialogShow(scope) {
      this.editDialogVisible = true;
      this.scope = scope;
    },
    // 修改标签的对话框关闭前触发的回调函数
    handleCloseEditDialogVisible() {
      this.editDialogVisible = false;
    },
    // 点击删除标签
    deleteTags(id) {
      // 提示消息弹框
      this.$confirm("此操作将永久删除该标签, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            // 发送请求删除标签
            await remove({ id: id });
            // 重新获取页面
            this.getTagsList();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          } catch (err) {
            this.$message({
              type: "error",
              message: "删除失败，请稍后重试",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
  
<style scoped lang='less'>
.container {
  padding: 10px;
  /deep/.el-breadcrumb__inner.is-link {
    color: #606266;
  }
  .tlabel {
    padding-left: 68px;
  }

  #nav-bar {
    display: flex;
    justify-content: space-between;
    .isLink {
      margin-right: 10px;
    }
  }

  .el-table {
    margin-top: 15px;
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
  }
  .Operationbutton {
    display: flex;
    align-items: center;
    user-select: none;
    justify-content: space-around;
  }
  .fromItems {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
